<template>
  <div class="contract-view" v-loading="showLoading">
    <!-- <div v-if="!btnAuth.viewProjectDetailAuth">
      <no-auth></no-auth>
    </div> -->

    <template>
      <!-- start 顶部信息展示 -->
      <div class="contract-view-title">
        <div class="contract-view-title-top">
          <div class="title-top-left">
            <div class="task-name">{{ detailData.projectTaskName }}</div>
            <el-progress :percentage="detailData.taskProgress"></el-progress>
            <ProjectTaskLabel class="ml_8" :current-row-data="detailData"/>
          </div>
          <div class="title-top-right">
            <el-button type="primary" v-if="isShowEdit" @click="UpdateProgressDialog.openDialog()">{{
              $t('projectManage.taskManageView.updateProgress')
            }}</el-button>
            <!-- 取消按钮 -->
            <el-button v-if="isCanCancel" @click="handelClickCancel">{{
              $t('task.taskTypes.planTask.cancelTask')
            }}</el-button>
            <!-- 草稿状态 -->
            <el-button type="primary" v-if="detailData.taskStatus === 'DRAFT'" @click="handelClickEdit('draft')">{{
              $t('common.base.submit')
            }}</el-button>
            <el-tooltip class="item" effect="dark" :content="$t('common.base.delete')" placement="top">
              <i class="iconfont icon-delete" v-show="isCanDelete" @click="handelClickDelete"></i>
            </el-tooltip>
            <!-- 编辑状态 -->
            <el-tooltip class="item" effect="dark" :content="$t('common.base.edit1')" placement="top">
              <i class="iconfont icon-edit-square" v-show="isShowEdit" @click="handelClickEdit('edit')"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="contract-view-title-bottom">
          <div>
            <span>{{ $t('projectManage.taskManageView.predecessors') }}</span>
            <span class="view-detail-btn" v-for="(item, i) in preTaskInfoList" @click="openPreTask(item)">
              {{ item.name }}
              <i v-if="preTaskInfoList.length - 1 !== i">，</i>
            </span>
          </div>
        </div>
      </div>
      <!-- end 顶部信息展示 -->

      <BaseTileLayoutTabBar
        v-if="taskLayout === 1"
        :bar-list="taskLayoutTabBarList"
        :now-item="leftActiveTab"
        @changeItem="tabBarChangeItem"
        @openLayoutModal="openBaseLayoutModal"
      ></BaseTileLayoutTabBar>

      <base-collapse 
        class="contract-detail-main-content" 
        :show-collapse="true" 
        :direction.sync="collapseDirection" 
        :hidePartCollapse="hidePartCollapse" >
        <!-- start 左侧面板  -->
        <template slot="left">
          <div class="contract-detail-main-content-left" v-show="collapseDirection != 'left'">
            <BaseTileLayoutTabBar
              v-if="taskLayout === 2"
              :bar-list="leftTabList" 
              :now-item="leftActiveTab" 
              :structure="2" 
              @openLayoutModal="openBaseLayoutModal">
            </BaseTileLayoutTabBar>

            <div class="content">
              <form-view class="bbx-cell-form-view" :class="formCellCount > 1 ? 'bbx-cell-form-view-split' : ''" :form-cell-count="formCellCount" :fields="fields" :value="dataInfo">
                <!-- 任务编号 S -->
                <template slot="missionNo" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content"> {{ dataInfo.taskNumber }} </div>
                  </div>
                </template>
                <!-- 任务编号 E -->

                <!-- 任务名称 S -->
                <template slot="missionName" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content"> {{ dataInfo.projectTaskName }} </div>
                  </div>
                </template>
                <!-- 任务名称 E -->

                <!-- 负责人 S -->
                <template slot="managerPerson" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content" v-if="dataInfo.manager.length">
                      <template v-for="item in dataInfo.manager">
                        <span v-user="item.userId" class="user-card-triggle">
                          <template v-if="isOpenData">
                            <open-data type="userName" :openid="item.staffId"></open-data>
                          </template>
                          <template v-else>
                            {{ item.displayName }}
                          </template>
                        </span>
                      </template>
                    </div>
                  </div>
                </template>
                <!-- 负责人 E -->

                <!-- 任务内容 S -->
                <template slot="missionContent" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content"> {{ dataInfo.projectTaskDesc }} </div>
                  </div>
                </template>
                <!-- 任务内容 E -->

                <!-- 任务状态 S -->
                <template slot="taskStatus" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content">
                      <span class="status-tag" :style="stateBGC(dataInfo.taskStatus)">
                        {{ formatStatus(dataInfo.taskStatus) }}
                      </span>
                    </div>
                  </div>
                </template>
                <!-- 任务状态 E -->

                <!-- 任务类型 S -->
                <template slot="taskType" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content"> 
                      <span>{{ taskTypeMap[dataInfo.taskType] || '' }}/{{ dataInfo.taskFormName }}</span>
                    </div>
                  </div>
                </template>
                <!-- 任务类型 E -->

                <!-- TODO 项目进度 S -->
                <template slot="taskProgress" slot-scope="{ field, value }">
                </template>
                <!-- 项目进度 E -->

                <!-- TODO 前置任务 S -->
                <template slot="preTaskInfoList" slot-scope="{ field, value }">
                </template>
                <!-- 前置任务 E -->

                <!-- 预计工时 S -->
                <template slot="expectTime" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content"> {{ dataInfo.expectWorkTime }} </div>
                  </div>
                </template>
                <!-- 预计工时 E -->

                <!-- 完成时间 S -->
                <template slot="completeTime" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content"> {{ dataInfo.completeTime | fmt_datetime }} </div>
                  </div>
                </template>
                <!-- 完成时间 E -->

                <!-- 项目编号 S -->
                <template slot="projectNumber" slot-scope="{ field, value }">
                  <div class="form-view-row bbx-form-cell-item">
                    <label>{{ field.displayName }}</label>
                    <div class="form-view-row-content" >
                      <span class="view-detail-btn" @click="openProjectViewTab(detailData)">
                        {{ dataInfo.projectNumber }}
                      </span>
                    </div>
                  </div>
                </template>
                <!-- 项目编号 E -->

              </form-view>
            </div>
          </div>
          <div class="extend-btn" v-show="collapseDirection == 'left'">
            {{ $t('projectManage.taskManageView.taskDetail') }}
          </div>
        </template>
        <!-- end 左侧面板  -->

        <template slot="rightExtend">
          <div class="extend-btn" @click="activeTab = 'info-record'">
            {{ $t('common.base.dynamicInfo') }}
          </div>
        </template>

        <!-- 右边面板 -->
        <template slot="right">
          <div class="contract-detail-main-content-right" v-show="collapseDirection != 'right'">
            <BaseBarV3 
              v-if="taskLayout == 2"
              :bar-list="tabBarList" 
              :now-item="rightActiveTab" 
              @changeItem="tabBarChangeItem"
              @upDateBarList="tabBarUpdateList"
            ></BaseBarV3>
            <div class="content">
              <component 
                ref="componentTabRefs"
                :is="rightActiveTab" 
                :projectId="queryInfo.projectId" 
                :templateId="projectTypeId"
                :taskId="queryInfo.id" 
                :btnAuth="btnAuth"
                :direction="collapseDirection"
                :isTaskCancelState="isTaskCancelState"
              ></component>
            </div>
          </div>
        </template>
      </base-collapse>
    </template>

    <!-- 更新进度弹窗 -->
    <update-progress-dialog ref="UpdateProgressDialog" :taskProgress="detailData.taskProgress" @submit="handelProgressSubmit"></update-progress-dialog>

    <!-- 编辑弹窗 -->
    <create-project-task ref="createProjectTaskModal" :project-id="queryInfo.projectId" :template-id="projectTypeId" @submitTask="submitTask" source="projectTask"></create-project-task>

    <!-- 通栏设置弹框 -->
    <biz-layout-modal
      ref="bizLayoutModal"
      :columns="formCellCount"
      :biz-layout-type="taskLayout"
      @changeLayout="changeTaskDetailLayout">
    </biz-layout-modal>
  </div>
</template>
<script>
import {
  onMounted,
  reactive,
  toRefs,
  ref,
  watch,
  computed,
  nextTick,
} from 'vue';
/* components */
import noAuth from '@src/modules/calendar/noAuth.vue';
import UpdateProgressDialog from '@src/modules/projectManage/taskManageView/components/UpdateProgressDialog.vue';
import { MessageBox } from 'element-ui';
import Platform from '@src/util/platform';
import platform from '@src/platform'

import projectTypeDynamicInfo from '@src/modules/projectManage/components/projectTypeDynamicInfo.vue';
import projectTypeWorkLog from '@src/modules/projectManage/components/projectTypeWorkLog.vue';
import BaseBarV3 from '@src/component/common/BaseTabBar/BaseTabBarV3.vue';
import CreateProjectTask from '@src/modules/setting/projectManage/components/TaskSettings/components/CreateProjectTask.vue'
import BaseTileLayoutTabBar from '@src/component/common/BaseTabBar/BaseTileLayoutTabBar.vue';
import ProjectTaskLabel from '@src/modules/projectManage/components/projectTaskLabel.vue'

/* hooks */
import { useFetchTaskViewData, useFetchCommonTaskData, useFetchTaskManageDeleteData, useFetchTaskManageUpdateProgress, useFetchEditTaskManageData, useCancelTaskManageData } from '@src/modules/projectManage/taskManageView/hooks/useFetch';
import { useFetchTaskManageFieldList, useFetchTaskManageAuth } from '@src/modules/projectManage/taskManageList/hooks/useFetch';
import { useOpenTab } from '@src/modules/projectManage/taskManageList/hooks/useOpenTab';
/* utils */
import i18n, { t } from '@src/locales';
import qs from '@src/util/querystring';
import { cloneDeep } from '@src/util/type';
import { formatStatus, stateBGC } from '@src/modules/projectManage/taskManageList/util/index';
import { useStateSystemViewLayout } from 'pub-bbx-utils'

/* enum */
import { BaseTabBarUsualEnum, StorageHttpParamsForTerminalType, StorageHttpParamsForModuleType } from '@src/component/common/BaseTabBar/enum';
/* api */
import { getStorageForDetailTabbar, setStorageForDetailTabbar } from '@src/api/SystemApi';
import * as ProjectManage from '@src/api/ProjectManage.ts';
/* model */
import { taskTypeMap } from '@src/modules/projectManage/taskManageList/model';
/* enum */
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
/* util */
import { openAccurateTab } from '@src/util/platform';
import * as FormUtil from '@src/component/form/util'

export default {
  components: {
    [UpdateProgressDialog.name]: UpdateProgressDialog,
    noAuth,
    BaseBarV3,
    projectTypeDynamicInfo,
    projectTypeWorkLog,
    CreateProjectTask,
    BaseTileLayoutTabBar,
    ProjectTaskLabel
  },
  setup() {
    // 页面loading
    const showLoading = ref(false);
    const componentTabRefs = ref(null);

    const state = reactive({
      collapseDirection: '',
      activeTab: 'info-record',
      typeOptions: [],
      tabBarList: [],
      rightActiveTab: '',
      leftTabList: [
        {
          position: 'left',
          tabName: 'project-detail',
          disabled: true,
          tabLabel: t('projectManage.taskManageView.taskDetail'),
          tabShow: true,
        },
      ],
      leftActiveTab: 'project-detail',
      formCellCount: 1,
      taskLayoutTabBarList: [],
      taskLayout: 2, // 布局方式 1:通栏 2:左右 
      tabPosition: '', // 记录tab位置  left|right
    });

    const projectTypeId = computed(() => {
      return dataInfo.value?.projectTypeId || '';
    });
    // 详情id&projectId
    const queryInfo = computed(() => {
      let query = qs.parse(window.location.search);

      return query;
    })

    // 表单数据
    const { fields, fetchTaskManageFieldList } = useFetchTaskManageFieldList();
    // 任务方法
    const { detailData, fetchTaskViewData } = useFetchTaskViewData();
    // 通用任务方法
    const { commonTaskData, fetchCommonTaskData } = useFetchCommonTaskData();
    // 删除任务方法
    const { reloadTab, fetchTaskManageDeleteData } = useFetchTaskManageDeleteData();
    // 更新进度方法
    const { fetchTaskManageUpdateProgress } = useFetchTaskManageUpdateProgress();
    // 按钮权限方法
    const { btnAuth, fetchProjectBtn } = useFetchTaskManageAuth();
    // 编辑的方法
    const { editTaskManageData } = useFetchEditTaskManageData();
    // 打开tab
    const { openTaskManageViewTab, openProjectViewTab } = useOpenTab();
    // 取消的方法
    const { cancelTaskManageData } = useCancelTaskManageData();

    const dataInfo = computed(() => {
      return {
        ...detailData.value,
        ...commonTaskData.value,
        taskNumber: detailData.value.taskNumber,
        taskBizNumber: detailData.value.taskBizNumber,
        // 自定义项
        attribute: commonTaskData.value.taskAttribute,
      }
    })

    /* start 顶部数据 */

    // openPreTask
    const openPreTask = (item) => {
      if (item.taskType === 'WORK_TASK') {
        if (item.taskBizId) {
          // 工单详情
          openAccurateTab({
            type: PageRoutesTypeEnum.PageTaskView,
            key: item.taskBizId,
            params: 'noHistory=1',
            reload: true,
          })
        } else {
          platform.error(this.$t('common.projectManage.editTip2'))
        }

      } else {
        // 任务详情
        openTaskManageViewTab({
          id: item.id,
          projectId: queryInfo.value.projectId,
          projectTypeId: projectTypeId.value,
          taskType: item.taskType,
          taskBizId: item.taskBizId,
          taskFormId: item.taskFormId,

        })
      }
    }
    // 是否展示更新进度按钮
    const isShowEdit = computed(() => {
      return detailData.value.hasEditAuth && (dataInfo.value?.taskStatus === 'NO_START' || dataInfo.value?.taskStatus === 'IN_PROGRESS') && dataInfo.value?.taskStatus !== 'CANCEL';
    })
    // 是否草稿状态
    const isDraft = computed(() => {
      return detailData.value.hasEditAuth && dataInfo.value.taskStatus === 'DRAFT';
    })
    const isCanDelete = computed(() => {
      return detailData.value.hasDeleteAuth && detailData.value.taskStatus !== 'CANCEL';
    })
    // 是否是取消状态
    const isTaskCancelState = computed(() => {
      return detailData.value.taskStatus === 'CANCEL';
    })
    // 是否展示取消按钮
    const isCanCancel = computed(() => {
      // 未开始和进行中
      const showStatus = ['NO_START', 'IN_PROGRESS'];
      return detailData.value.hasCancelAuth && showStatus.includes(detailData.value.taskStatus);
    })

    const hidePartCollapse = computed(() => {
      if (state.taskLayout === 1) return state.tabPosition === 'left' ? 'right' : 'left';
      return '';
    })

    // 删除
    const handelClickDelete = () => {
      MessageBox.confirm(
        i18n.t('projectManage.taskManageView.confirmMsg'),
        i18n.t('contract.delContract.confirm.title'),
        {
          type: 'warning',
        }
      )
        .then(async () => {
          await fetchTaskManageDeleteData(queryInfo.value);

          if (reloadTab) {
            setTimeout(() => {
              reloadTab();
            }, 300);
          }
        })
        .catch(err => { });
    }

    // 编辑弹窗
    const createProjectTaskModal = ref(null);
    const taskForm = ref({});
    // 获取任务详情和任务表单详情
    const handelClickEdit = (type) => {
      const taskId = detailData.value.id;

      ProjectManage.taskDetailPro({ id: taskId, projectId: queryInfo.value.projectId }).then(async (res) => {
        if (!res.success) return Platform.toast(res.message, 'error');
        taskForm.value = {
          id: taskId || '',
          preTaskId: (res.data.preTaskInfoList || []).map((item) => (item.id)),
          ...res.data,
        }

        if (type === 'draft' || detailData.value.taskType !== 'COMMON_TASK') {
          // 草稿状态的话，直接打开弹窗，不用请求通用任务详情接口
          createProjectTaskModal.value.openDialog(taskForm.value, true, type)
        } else {
          // 新建任务和编辑通用任务的时候调用
          await getCommonTaskDetail(res?.data?.taskBizId, type)
        }
      })
    }

    // 取消任务
    const handelClickCancel = () => {
      MessageBox.confirm(
        i18n.t('common.projectManage.taskManageCancelTip'),
        i18n.t('contract.delContract.confirm.title'),
        {
          type: 'warning',
        }
      )
        .then(async () => {
          cancelTaskManageData(queryInfo.value, () => {
            // 更新页面内容
            initTaskManageViewInfo(false);
            fetchRecordInfo();
          });
        })
        .catch(err => { });
    }

    // 获取通用任务表单详情
    const getCommonTaskDetail = (taskBizId, type) => {
      ProjectManage.comTaskDetailPro({ id: taskBizId }).then((res) => {
        if (!res.success) return Platform.toast(res.message, 'error');
        const commonTaskForm = res?.data || {};

        commonTaskForm.commonId = taskBizId;  // 详细的任务表单id
        delete commonTaskForm?.id; // 去掉详细的任务表单id
        const taskDetailForm = { ...taskForm.value, ...commonTaskForm }

        // 打开编辑弹窗 type区分编辑还是草稿提交
        createProjectTaskModal.value.openDialog(taskDetailForm, true, type)
      })
    }

    // 提交创建的任务字段
    const submitTask = async (form, isEdit, actionType) => {
      let params = {
        ...form,
      }

      await editTaskManageData(params, actionType, function () {
        createProjectTaskModal.value.closeDialog();
        initTaskManageViewInfo(false);
        fetchRecordInfo();
      });
    }

    // 前置任务的展示
    const preTaskInfoList = computed(() => {
      return detailData.value?.preTaskInfoList || [];
    })
    /* end 顶部数据 */

    /* start 右侧数据内容 */
    // 初始化tabBar
    const initRightTabBar = async () => {

      await initLayoutData();
      
      // 通栏模式tabPosition默认left
      if (state.taskLayout === 1) {
        state.tabPosition = 'left'
      }

      let { TabBarListItemKey: tabName, TabBarListItemLabel: tabLabel, TabBarListItemShow: tabShow, TabBarCardInfoType: tabIsCardType, TabCardInfoSingle: tabIsCardSingle, TabBarListItemType: tabType } = BaseTabBarUsualEnum;

      let barArr = [
        { position: 'right', [tabName]: 'project-type-dynamic-info', disabled: true, [tabLabel]: i18n.t('common.base.dynamicInfo'), [tabShow]: true },
        { position: 'right', [tabName]: 'project-type-work-log', [tabLabel]: i18n.t('common.projectManage.detail.tab.workLog'), [tabShow]: true },
      ];

      let params_ = {
        equipment: StorageHttpParamsForTerminalType.PC,
        bizType: StorageHttpParamsForModuleType.TaskManage,
        bizTypeId: '0',
      };

      try {
        // 获取tabbar用户行为缓存
        let storageList = await getStorageForDetailTabbar(params_);
        if (storageList.status !== 0) {
          throw storageList.message;
        }
        let storageList_ = storageList.data.map(item => {
          const { cardId, checked } = item;
          return {
            [tabName]: cardId,
            [tabShow]: checked,
          };
        });
        console.log(storageList_, 'storageList_');
        // barArr = computedTabList(barArr, storageList_);
      } catch (error) {
        console.warn(error, 'error try catch getStorageForDetailTabbar');
      }

      state.tabBarList = barArr;

      nextTick(() => {
        let firstItem = barArr && barArr.find(item => item[tabShow]);
        state.rightActiveTab = firstItem?.[tabName];
      });
    };

    watch(
      ()=>[state.leftTabList, state.tabBarList], ([newValue1, newValue2]) => {
        state.taskLayoutTabBarList = cloneDeep([...newValue1, ...newValue2].filter(item => item.tabShow));
      },
      {
        deep: true
      }
    )

    // 切换tab
    const tabBarChangeItem = item => {
      let { TabBarListItemKey: tabName, TabBarListItemType: tabType, TabBarCardInfoType } = BaseTabBarUsualEnum;
      let { position } = item
      state.tabPosition = position

      // 通栏导航和左侧导航共用leftActiveTab数据
      if (state.taskLayout === 1 || position == 'left') {
        state.leftActiveTab = item[tabName];
      }
      // 右侧导航
      if (position == 'right') {
        state.rightActiveTab = item[tabName];
      }
    };
    // tabbar数据发生变更钩子函数
    const tabBarUpdateList = list => {
      const { TabBarCardInfoType, TabBarListItemKey: tabName, TabBarListItemShow: tabShow } = BaseTabBarUsualEnum;
      let list_ = list.map(item => {
        return {
          cardId: item.type == TabBarCardInfoType ? item.id : item[tabName],
          checked: item[tabShow],
        };
      });
      let params_ = {
        equipment: StorageHttpParamsForTerminalType.PC,
        bizType: StorageHttpParamsForModuleType.TaskManage,
        bizTypeId: '0',
        cardList: list_,
      };
      setStorageForDetailTabbar(params_);
    };
    /* end 右侧数据内容 */

    /* start 更新进度 */
    const UpdateProgressDialog = ref(null);

    const handelProgressSubmit = async (form) => {
      const params = {
        ...form,
        ...queryInfo.value
      }
      await fetchTaskManageUpdateProgress(params, UpdateProgressDialog, function () {
        fetchTaskViewData(queryInfo.value);
        fetchRecordInfo();
      });
    }
    /* end 更新进度 */

    const fetchRecordInfo = () => {
      if(state.activeTab === 'info-record') componentTabRefs.value.searchRecord();
    }

    // 初始化页面信息数据
    const initTaskManageViewInfo = async (isGetField = true) => {
      // 任务内容获取
      await fetchTaskViewData(queryInfo.value);
      // 获取项目类型字段
      if (isGetField) await fetchTaskManageFieldList(detailData.value.taskFormId, 'view');

      // 处理富文本
      if(detailData.value?.taskAttribute && fields.value?.length) {
        const formValue = {
          attribute: detailData.value.taskAttribute
        }
        const newValue = await FormUtil.initRichTextContent(fields.value, formValue);
        detailData.value.taskAttribute = newValue?.attribute || {};
      }
      // 通用任务数据获取

      if (detailData?.value.taskType !== 'COMMON_TASK') {
        if (detailData.value?.taskBizId) await fetchCommonTaskData({ id: detailData.value.taskBizId });
      }
    }

    const bizLayoutModal = ref(null)
    const openBaseLayoutModal = ()=>{
      bizLayoutModal.value.open()
    }
    const changeTaskDetailLayout = (type, columns)=>{
      state.formCellCount = columns * 1
      state.taskLayout = type;
      state.leftActiveTab = state.leftTabList[0]?.tabName;
      state.tabPosition = 'left';
      if (type === 2) {
        state.rightActiveTab = state.tabBarList[0].tabName
      }
    }

    async function initLayoutData(){
      const { getSystemViewLayout } = useStateSystemViewLayout()
      const count = await getSystemViewLayout()
      state.taskLayout = count.baseLayout || 2;
      state.formCellCount = count.formCellCount || 1;
    }


    onMounted(async () => {
      if (window.frameElement) {
        // 初始化title
        let currTabId = window.frameElement.dataset.id;
        platform.setTabTitle({
          id: currTabId,
          title: i18n.t('projectManage.taskManageView.taskDetail')
        })
      }

      initRightTabBar();
      initTaskManageViewInfo();
      fetchProjectBtn({ projectId: queryInfo.value.projectId });
    });

    return {
      showLoading,
      isShowEdit,
      queryInfo,
      projectTypeId,
      preTaskInfoList,
      createProjectTaskModal,
      dataInfo,
      formatStatus,
      submitTask,
      openPreTask,
      openProjectViewTab,
      isDraft,
      isCanDelete,
      componentTabRefs,
      isCanCancel,
      isTaskCancelState,
      hidePartCollapse,

      handelClickDelete,
      handelClickEdit,
      handelClickCancel,

      fields,
      detailData,
      commonTaskData,

      UpdateProgressDialog,
      handelProgressSubmit,

      tabBarChangeItem,
      tabBarUpdateList,
      ...toRefs(state),
      btnAuth,
      taskTypeMap,
      stateBGC,

      bizLayoutModal,
      openBaseLayoutModal,
      changeTaskDetailLayout,
    };
  },
};
</script>
<style lang="scss">
.theme-default {
  padding: 12px;
}
</style>
<style lang="scss" scoped>
.contract-view {
  width: 100%;
  min-width: 1100px;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;

  &-title {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 12px;

    &-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 13px;

      .title-top {
        &-left {
          display: flex;
          align-items: center;

          .task-name {
            color: #333;
            font-size: 16px;
            font-weight: 500;
            font-family: PingFangSC-Medium, PingFang SC;
            margin-right: 20px;
          }

          .el-progress {
            width: 150px;

            ::v-deep .el-progress__text {
              color: rgba(0, 0, 0, 0.45);
            }
          }
        }

        &-right {
          .iconfont {
            margin-left: 20px;
            cursor: pointer;
          }
        }
      }
    }

    &-bottom {
      display: flex;
      align-items: center;

      >div {
        margin-right: 60px;

        >span:nth-child(1) {
          color: $text-color-regular !important;
        }

        .view-detail-btn {
          color: $color-primary;
          cursor: pointer;
        }
      }
    }
  }

  .contract-detail-main-content {
    flex: 1;

    &-left,
    &-right {
      border-radius: inherit;
      height: 100%;
      overflow: hidden;
    }

    &-left {
      display: flex;
      flex-direction: column;

      .title {
        height: 40px;
        line-height: 40px;
        background: #fafafa;
        padding-left: 16px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #262626;
        border-bottom: 1px solid #e8e8e8;
        border-radius: 4px 4px 0 0;
      }

      .content {
        overflow: auto;
      }

      .status-tab {
        display: inline-block;
        min-width: 52px;
        max-width: 128px;
        height: 22px;
        line-height: 22px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 11px;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
      }
    }

    &-right {
      height: 100%;
      overflow: hidden;

      .content {
        padding: 16px;
        overflow: auto;
        height: calc(100% - 40px);
      }

      ::v-deep .el-tabs {
        height: 100%;
        overflow: hidden;

        &__header {
          background: #fafafa;
          width: 100%;

          .el-tabs__item {
            color: $text-color-regular;

            &.is-active {
              @include fontColor();
            }
          }
        }

        &__nav-wrap {
          padding-left: 16px;
        }

        &__content {
          height: calc(100% - 56px);
          // overflow-y: auto;
          padding: 0;

          #pane-schedule-reminder {
            overflow: hidden;
          }

          .el-tab-pane {
            height: 100%;

          }
        }
      }
    }

    .extend-btn {
      height: 40px;
      line-height: 40px;
      background: #fafafa;
      padding-left: 16px;
      border-bottom: 1px solid #e4e7ed;
    }
  }
}

.plan-dropdown-item {
  color: #262626;
  display: block;

  &:hover {
    text-decoration: none;
  }
}

.link {
  color: $color-primary-light-6;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.status-tag {
  padding: 0 8px;
  background-color: $color-ding-blue;
  line-height: 22px;
  border-radius: 22px;
  color: #fff;
  font-size: 12px;
  display: inline-block;
}

::v-deep .base-modal-body {
  padding: 16px;
}
</style>